<template>
	<t-modal :title="title" :width="470" :visible="visible" :footer="null" @ok="() => { $emit('ok'); }"
		@cancel="() => { $emit('cancel'); }">
		<template>
			<div style="display: flex;justify-content: space-around;">
				<div class="card-item" @click="cardClick('table')">
					<div class="img-box">
						<img src="~@/assets/img/report01.png" />
					</div>
					<div class="text-box">
						<div class="title">{{ $ct('New data table', '新建数据表') }}</div>
					</div>
				</div>
				<div class="card-item" @click="cardClick('view')">
					<div class="img-box">
						<img src="~@/assets/img/report02.png" />
					</div>
					<div class="text-box">
						<div class="title">{{ $ct('New data view', '新建数据视图') }}</div>
					</div>
				</div>
			</div>
		</template>
		<div class="text-center text-bold margin-top-sm">
			<a-tooltip placement="topLeft">
				<template slot="title">
					<span>{{ $ct("New data table", "新建数据表") }}、
						<br>
						{{ $ct("Create a new data view based on the data table", "基于数据表新建数据视图") }}
					</span>
				</template>
				<span style="cursor: pointer;">{{ $ct("HowToSelect", "如何选择") }}?</span>
			</a-tooltip>
		</div>
	</t-modal>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			required: true
		},
		type: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			title: this.$ct('new data', '新建数据')
		};
	},
	created() {

	},
	methods: {
		cardClick(e) {
			this.$emit("click", e)
		}
	}
};
</script>
<style lang="less" scoped>
.card-item {
	transition: 0.3s all;
	cursor: pointer;
	width: 181px;
	border: 1px solid #F0F2F5;
	border-radius: 10px;
	padding-bottom: 15px;

	.img-box {
		padding: 40px 20px 20px;

		img {
			width: 100%;
		}
	}
}

.card-item:hover {
	transform: scale(1.02);
	border: 1px solid #1890ff;
	box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
}

.text-box {
	text-align: center;

	.title {
		font-size: 16px;
		color: #171a1d;
		font-weight: 600;
		margin-bottom: 5px;
	}

	.text {
		font-size: 12px;
		color: rgb(206 206 206);
	}
}
</style>
